//渲染页面
function renderStudent(){
  axios({
url:'/students',
headers: {
  Authorization: localStorage.getItem('token')
}
  }).then(res=>{
// console.log(res.data)

let arrNew=res.data.data
let str=arrNew.map((item,index)=>{
  return `
                     <tr>
                      <td>${item.name}</td>
                      <td>${item.age}</td>
                      <td>${item.gender === 0 ? '男' : '女'}</td>
                      <td>第${item.group}组</td>
                      <td>${item.salary}</td>
                      <td>${item.hope_salary}</td>
                      <td>${item.province} ${item.city} ${item.area}</td>
                      <td>
                        <a href="javascript:;" class="text-success mr-3"><i data-id=${item.id} class="bi bi-pen"></i></a>
                        <a href="javascript:;" class="text-danger"><i data-id=${item.id} class="bi bi-trash"></i></a>
                      </td>
                    </tr>
  `
})
document.querySelector('.list').innerHTML=str.join('')
document.querySelector('.total').innerHTML=arrNew.length
  })

}
renderStudent()
/* 二*/
//找到页面中的模态盒子
const modalBox=document.querySelector('#modal')
//实例化模态对象
const modal= new bootstrap.Modal(modalBox)
//点击加号模态框显示出来
document.querySelector('#openModal').addEventListener('click',function(){
  // console.log(1234)
  document.querySelector('.modal-title').innerHTML='添加学员'//修改标题
  document.querySelector('#form').reset()//重置表单
  modal.show()//让模态框显示出来
})
//省市县
let province=document.querySelector('[name=province]')
let city= document.querySelector('[name=city]')
let area=document.querySelector('[name=area]')

//获取省，并渲染
  async function getProvince(){
   const{data:arrNew}=await axios({
    url:'/api/province',
    method:'GET'
  })
    // console.log(arrNew.data)
    let str=arrNew.data.map(item=>` <option value="${item}">${item}</option>`)
    province.innerHTML=' <option value="">--省份--</option>' +str.join('')
  }
  //获取市
   async function getCity(){
    //切换省的时候 地区重置
area.innerHTML=' <option value="">--地区--</option>'
if(province.value===''){
  city.innerHTML=' <option value="">--城市--</option>'
  return
}
const {data:res}= await axios({
  url:'/api/city',
  method:'GET',
  params:{
    pname:province.value
  }
})
let num=res.data.map(item=>`  <option value="${item}">${item}</option>`)
city.innerHTML=' <option value="">--城市--</option>'+num.join('')
  }
  //获取地区
  async function getArea(){
    if(city.value===''){
      area.innerHTML=' <option value="">--地区--</option>'
    }
   const {data:obj}=  await   axios({
          url:'/api/area',
          method:'GET',
          params:{
            pname:province.value,
            cname:city.value
          }
        })
        console.log(obj.data)
let vb=obj.data.map(item=>`  <option value="${item}">${item}</option>`)
area.innerHTML=' <option value="">--地区--</option>'+vb.join('')
  }
getProvince()
province.addEventListener('change',getCity)
city.addEventListener('change',getArea)

               /* 点击确认 添加学员 */
document.querySelector('#submit').addEventListener('click',async function(e){
  e.preventDefault()
// console.log(12345)
//收集表单中的数据
let  data=val(document.querySelector('#form'))
console.log(data)
//把字符串转换成真的数字
data.age=Number(data.age)
data.gender=+data.gender
data.group=+data.group
data.hope_salary=+data.hope_salary
data.salary=+data.salary
//点击弹出层中的确认的时候，根据弹出层中的标题判断一下，是添加操作还是修改操作
let title = document.querySelector('.modal-title').innerHTML
if(title==='添加学员'){
  const {data: res}=await axios({
    url:'/students',
    method:'POST',
    data
  })
message.success(res.message)
document.querySelector('#form').reset()//重置表单
modal.hide()
renderStudent()
}else if(title==='修改学员'){
let id=document.querySelector('.modal-title').dataset.id
console.log(id)
//发送请求 进行修改
const {data:res}=await axios.put(`./students/${id}`,data)
message.success(res.message)//使用插件提示
modal.hide()
renderStudent()
}
 
})
                            /* 删除···················· 修改 */
document.querySelector('tbody'),addEventListener('click',async function(e){
  //删除
  let id=e.target.dataset.id
if(e.target.classList.contains('bi-trash')){
  if(!confirm('是否删除'))return//
 const {data: res} = await axios({
  url:`/students/${id}`,
  method:'DELETE',
})
message.success('删除成功')
renderStudent()
}

//点击的是修改
if(e.target.classList.contains('bi-pen')){
    document.querySelector('.modal-title').innerHTML='修改学员'//修改标题
    let id=e.target.dataset.id
  document.querySelector('.modal-title').setAttribute('data-id',id)
    // document.querySelector('#form').reset()//重置表单
    modal.show()//点击修改让显示框出来
   const res= await axios({url:`/students/${id}`})
   console.log(res.data.data)
      //获取市和县，获取后渲染到对应的下拉框
      let res1 =await axios({
        url: '/api/city',
        params: {
          pname: res.data.data.province
        }
      })
      console.log(res1.data.data)
      let num=res1.data.data.map(item=>`  <option value="${item}">${item}</option>`)
      city.innerHTML=' <option value="">--城市--</option>'+num.join('')

      let res2 =await axios({
        url: '/api/area',
        params: {
          pname: res.data.data.province,
          cname: res.data.data.city
        }
      })
  
      let vb=res2.data.data.map(item=>`  <option value="${item}">${item}</option>`)
      area.innerHTML=' <option value="">--地区--</option>'+vb.join('')
      val(document.querySelector('#form'),res.data.data)
}
})

/* 退出 */
// document.querySelector('#logout').addEventListener('click',function(){
//   console.log(123)
//   location.href='./login.html'
//   // localStorage.removeItem('token')
// })
